<template>
  <div class="scalable-pages">
    <main class="main">
      <div class="container">
        <div class="section1">
          <div class="left" v-animate-on-scroll="'slideInLeft'">
            <img
              src="https://www.kdxwindowfilm.com/banners/static/0ef781787f9087ccf05ea12329aa6b1943576e7b208c2f-i7cyFT.jpg" />
          </div>

          <div class="right" v-animate-on-scroll="'slideInRight'">
            <!-- 页面标题区域 -->
            <div class="page-header">
              <p class="main-title">建筑窗膜工程-</p>
              <p class="subtitle">智能空间新视界</p>
            </div>

            <!-- 简介区域 -->
            <div class="intro-section">
              <p>
                国际窗膜协会连续12年力荐的KDX建筑膜，以亚洲首家制造商协会认证的尖端工艺，为玻璃披上隐形安全铠甲。
              </p>
              <p>
                KDX建筑膜以精密磁控溅射涂层与玻璃浑然一体，高效阻隔紫外线侵袭，赋予幕墙、落地窗抗冲击守护力，杜绝破碎飞溅隐患。无需拆换玻璃，一贴即焕活节能新体验，用专业防护为建筑空间筑起安心屏障，让每寸透光都成为安全与品质的见证。
              </p>
            </div>

            <div class="buttons">
              <div v-for="(category, index) in filteredCategories" :key="category.id" class="button"
                :class="{ active: activeCategoryIndex === index }" @click="changeCategory(index)">
                {{ category.name }}
              </div>
            </div>

            <div class="data-section-wrap">
              <div class="img">
                <img style="    height: 507px;
    width: 405px;" :src="currentFilm?.image ||
      'https://www.kdxwindowfilm.com/banners/static/b02ef5ecee3789464479089cf19c378a0abb4b60106a8b-UJy6g8_fw1200.jpg'
      " />
              </div>
              <div class="right">
                <div class="tabs">
                  <div v-for="(film, index) in films" :key="film.id" class="tab"
                    :class="{ active: activeFilmIndex === index }" @click="changeFilm(index)">
                    {{ film.name }}
                  </div>
                </div>
                <!-- 数据指标区域 -->
                <div class="data-section">
                  <div class="data-card">
                    <div class="data-value">
                      <span class="num">{{
                        formatNumber(currentFilm?.visible_light_reflectance, 0)
                      }}</span>
                      %
                    </div>
                    <div class="data-label">可见光反射比</div>
                  </div>
                  <div class="data-card">
                    <div class="data-value">
                      <span class="num">{{
                        formatNumber(currentFilm?.solar_energy_rejection, 0)
                      }}</span>
                      %
                    </div>
                    <div class="data-label">太阳能总阻隔率</div>
                  </div>
                  <div class="data-card">
                    <div class="data-value">
                      <span class="num">{{
                        formatNumber(currentFilm?.uv_rejection, 0)
                      }}</span>
                      %
                    </div>
                    <div class="data-label">紫外线阻隔率</div>
                  </div>
                  <div class="data-card">
                    <div class="data-value">
                      <span class="num">{{
                        formatNumber(
                          currentFilm?.visible_light_transmittance,
                          0
                        )
                      }}</span>
                      %
                    </div>
                    <div class="data-label">可见光透射比</div>
                  </div>
                  <div class="data-card">
                    <div class="data-value">
                      <span class="num">{{
                        formatNumber(currentFilm?.thickness, 1)
                      }}</span>
                      mil
                    </div>
                    <div class="data-label">厚度</div>
                  </div>
                  <div class="data-card">
                    <div class="data-value">
                      <span class="num">{{
                        currentFilm?.warranty || "--"
                      }}</span>
                      年+
                    </div>
                    <div class="data-label">质保年限</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 建筑窗膜应用案例 - 保持静态不变 -->
        <div class="section2" v-animate-on-scroll="'fadeInUp'">
          <div class="section-title">建筑窗膜工程应用案例</div>
          <div class="product-showcase">
            <div class="product-item" v-for="(item, index) in constructionFilms" :key="index">
              <img :src="item.image" :alt="item.name" class="product-image" />
              <div class="product-name">{{ item.name }}</div>
            </div>
          </div>
        </div>

        <!-- 家居膜专区 -->
        <div class="section3">
          <div class="page-header">
            <p class="main-title">建筑家居膜-</p>
            <p class="subtitle">家居贴膜</p>
          </div>

          <!-- 家居膜分类下的商品 -->
          <div class="product-category">
            <div v-for="(film, index) in homeFilms" :key="film.id" class="category-tab"
              :class="{ active: activeHomeFilmIndex === index }" @click="changeHomeFilm(index)">
              {{ film.name }}
            </div>
          </div>
          <img class="centers"
            :src="currentHomeFilm?.image || 'https://www.kdxwindowfilm.com/banners/static/indextype/1.jpg'" />
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { get } from "@/utils/request";
import { vToast } from "@/plugins/vToast";

export default {
  data() {
    return {
      categories: [],
      films: [],
      activeCategoryIndex: 0,
      activeFilmIndex: 0,
      homeFilms: [],
      activeHomeFilmIndex: 0,
      homeCategoryId: null,
      constructionFilms: [],
    };
  },
  computed: {
    filteredCategories() {
      return this.categories.filter(
        (category) => category.id !== "11" && category.id !== "31"
      );
    },
    currentFilm() {
      return this.films[this.activeFilmIndex] || null;
    },
    currentHomeFilm() {
      return this.homeFilms[this.activeHomeFilmIndex] || null;
    },
  },
  methods: {
    formatNumber(value, decimals) {
      if (value === undefined || value === null) return "--";
      const num = parseFloat(value);
      if (isNaN(num)) return "--";
      return num.toFixed(decimals);
    },
    async fetchCategories() {
      try {
        const res = await get("/filmCategory/list", { type: "building" });
        if (res.code === 200) {
          this.categories = res.data || [];

          // 查找家居膜分类
          const homeCategory = this.categories.find((c) => c.name === "家居膜");
          if (homeCategory) {
            this.homeCategoryId = homeCategory.id;
            this.fetchHomeFilms();
          }

          if (this.filteredCategories.length > 0) {
            this.fetchFilms(this.filteredCategories[0].id);
          }
        }
      } catch (error) {
        vToast.error("获取分类失败");
        console.error(error);
      }
    },
    async fetchFilms(categoryId) {
      try {
        const res = await get("/buildingFilm/list", {
          pageSize: 100,
          category_id: categoryId,
        });
        if (res.code === 200) {
          this.films = res.data.list || [];
          this.activeFilmIndex = 0;
        }
      } catch (error) {
        vToast.error("获取产品失败");
        console.error(error);
      }
    },
    async fetchHomeFilms() {
      if (!this.homeCategoryId) return;

      try {
        const res = await get("/buildingFilm/list", {
          pageSize: 100,
          category_id: this.homeCategoryId,
        });
        if (res.code === 200) {
          this.homeFilms = res.data.list || [];
          this.activeHomeFilmIndex = 0;
        }
      } catch (error) {
        vToast.error("获取家居产品失败");
        console.error(error);
      }
    },
    async fetchConstructionFilms() {
      try {
        const res = await get("/buildingFilm/list", {
          pageSize: 100,
          category_id: 31,
        });
        if (res.code === 200) {
          this.constructionFilms = res.data.list.reverse() || [];
        }
      } catch (error) {
        vToast.error("获取建筑窗膜工程应用案例失败");
      }
    },
    changeCategory(index) {
      this.activeCategoryIndex = index;
      this.fetchFilms(this.filteredCategories[index].id);
    },
    changeFilm(index) {
      this.activeFilmIndex = index;
    },
    changeHomeFilm(index) {
      this.activeHomeFilmIndex = index;
    },
  },
  mounted() {
    this.fetchCategories();
    this.fetchConstructionFilms()
  },
};
</script>

<style scoped lang="less">
/* 保持原有的样式不变 */
.centers {
  margin: 0 auto;
  display: block;
}

.banners {
  width: 100%;
  display: block;
}

.swipers {
  width: 100%;
}

.main {
  background-color: white;
}

.container {
  margin: 0 auto;
}

.section1 {
  display: flex;
  flex-direction: row;

  .left {
    width: 39.6%;

    img {
      width: 698px;
      height: 1240px;
    }
  }

  .right {
    width: 60%;
    padding-left: 96px;
    /* 5vw = 96px (1920 * 0.05) */

    .page-header {
      margin-top: 50px;
      text-align: left;
      margin-bottom: 40px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      font-size: 44px;
      /* 2.29vw = 44px */
      font-weight: bold;

      .main-title {
        color: #000;
      }

      .subtitle {
        color: #c4010a;
        margin-left: 10px;
      }
    }

    .intro-section {
      font-size: 28px;
      /* 1.35vw = 26px */
      color: #000;
      line-height: 1.7;
      text-align: left;
      width: 960px;
      /* 50vw = 960px (1920 * 0.5) */
    }

    .buttons {
      display: flex;
      margin: 58px 0;
      /* 3vw = 58px (1920 * 0.03) */

      .button {
        margin-right: 22px;
        padding: 12px 28px;
        /* min(12px, 0.8vw) min(28px, 1.8vw) */
        border: 1px solid #c5000a;
        /* 0.5px -> 1px */
        color: #c5000a;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 24px;
        /* min(24px, 1.5vw) */
        display: inline-flex;
        align-items: center;
        justify-content: center;

        &.active {
          background-color: #c5000a;
          color: #fff;
        }
      }
    }

    .data-section-wrap {
      width: 100%;
      display: flex;
      flex-direction: row;

      .img {
        width: 40%;

        img {
          width: 100%;
        }
      }

      >.right {
        width: 60%;

        .tabs {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 20px;

          .tab {
            margin-right: 58px;
            /* 3vw = 58px */
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 29px;
            /* 1.5vw = 29px */
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #555;

            &.active {
              font-weight: bold;
            }
          }
        }
      }
    }

    .data-section {
      display: flex;
      flex: 1;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 60px;
      width: 60%;
    }

    .data-card {
      width: 50%;
      height: 150px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      // margin-bottom: 20px;
      transition: all 0.3s ease;
    }

    .data-value {
      font-size: 35px;
      /* 1.8vw = 35px */
      color: #c5000a;
      font-weight: bold;
      margin-bottom: 10px;

      .num {
        font-size: 50px;
        /* 3.6vw = 69px */
      }
    }

    .data-label {
      font-size: 16px;
      color: #333;
      text-align: center;
    }
  }
}

.section2 {
  width: 1728px;
  /* 90% of 1920 */
  margin: 0 auto;
  margin-top: 100px;

  .section-title {
    font-size: 40px;
    /* min(50px, 3vw) */
    color: #333;
    font-weight: bold;
    margin: 0 auto;
    text-align: left;
    margin-bottom: 33px;
    /* min(33px, 3vw) */
  }

  .product-showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 96px;
    /* 5vw = 96px */

    .product-item {
      margin-bottom: 20px;
      transition: all 0.3s ease;
      border-radius: 8px;

      &:hover {
        transform: translateY(-5px);
      }

      .product-image {
        width: 100%;
        object-fit: cover;
        border-radius: 8px;
      }

      .product-name {
        text-align: center;
        font-size: 24px;
        color: #333;
        margin-top: 15px;
      }
    }
  }
}

.section3 {
  width: 1728px;
  /* 90% of 1920 */
  margin: 0 auto;

  .page-header {
    text-align: left;
    margin-bottom: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    /* 2.5vw = 48px */
    font-weight: bold;

    .main-title {
      color: #000;
    }

    .subtitle {
      color: #c4010a;
      margin-left: 10px;
    }
  }

  .product-category {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 15px;
  }

  .category-tab {
    padding: 15px 44px;
    /* 0.8vw = 15px, 2.3vw = 44px */
    font-size: 24px;
    /* min(24px, 1.8vw) */
    border-radius: 5px;
    background-color: #5a5859;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;

    &.active {
      background-color: #e60012;
    }
  }

  .two-image {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 96px 0;
    /* 5vw = 96px */

    .item {
      width: 50%;

      img {
        width: 100%;
      }
    }
  }

  .title {
    background-color: #7d5c26;
    font-size: 24px;
    /* min(24px, 1.6vw) */
    color: #fff;
    padding: 10px 15px;
    display: flex;
    justify-content: flex-start;

    &.title1 {
      width: 500px;
    }

    &.title2 {
      width: 200px;
    }
  }

  .text {
    font-size: 24px;
    /* min(24px, 1.4vw) */
    color: #333;
    padding: 10px 10px;
    margin-bottom: 20px;
  }
}
</style>